<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="是否支付">
                <a-select v-model="queryParam.if_pay" placeholder="请选择" default-value="">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="1">已支付</a-select-option>
                  <a-select-option value="2">未支付</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="问卷分类">
                <a-select v-model="queryParam.question_type_id" placeholder="请选择" default-value="">
                  <a-select-option value="">全部</a-select-option>
                  <template v-for="(item,index) in questionTypeListData.data">
                    <a-select-option v-bind:key="index" :value="item.id">{{ item.name }}</a-select-option>
                  </template>
                </a-select>
              </a-form-item>
            </a-col>

            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="时间区间">
                  <a-range-picker  v-model="queryParam.created_at_range">
                    <template slot="dateRender" slot-scope="current">
                      <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                        {{ current.date() }}
                      </div>
                    </template>
                  </a-range-picker>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="用户地址">
                  <a-input v-model="queryParam.address" placeholder="" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="付款小于">
                  <a-input-number v-model="queryParam.payed_money" placeholder="" allow-clear/>
                </a-form-item>
              </a-col>
            </template>

            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item  @click="handleDelete"  key="1"><a-icon type="delete"/>删除</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            批量操作
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
      </div>

      <s-table
              ref="table"
              size="default"
              rowKey="key"
              :columns="columns"
              :data="loadData"
              :alert="true"
              :rowSelection="rowSelection"
              :scroll="{ x: 2000 }"
              showPagination="true"
      >
        <avatar-item size="large" slot="wechat_account_avatar" slot-scope="text"  shape="circle" :src = "text | iconFilter" />
        <avatar-item size="large" slot="from_wechat_account_avatar" slot-scope="text"  shape="circle" :src = "text | iconFilter" />
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import moment from 'moment'
  import { STable, Ellipsis } from '@/components'
  import { questionList } from '@/api/question'
  import { questionTypeList } from '@/api/questionType'

  import StepByStepModal from '../list/modules/StepByStepModal'
  import CreateForm from '../list/modules/CreateForm'
  import AvatarItem from "../../components/AvatarList/Item";
  import { questionDelete } from "../../api/question";

  const columns = [
    {
      title: '微信用户名称',
      dataIndex: 'wechat_account.account',
      fixed: 'left'
    },
    {
      title: '微信用户头像',
      dataIndex: 'wechat_account.avatar',
      scopedSlots: { customRender: 'wechat_account_avatar' },
      fixed: 'left'
    },
    {
      title: '来自于微信用户名称',
      dataIndex: 'from_wechat_account.account'
    },
    {
      title: '来自于微信用户头像',
      dataIndex: 'from_wechat_account.avatar',
      scopedSlots: { customRender: 'from_wechat_account_avatar' },
    },
    {
      title: '调查问卷分类',
      dataIndex: 'question_types',
      customRender: function(text, record, index) {
        let res = '';
        for (const i in text) {
          res += text[i].name + ','
        }
        return res.substr(0, res.length - 1);
      },
    },
    {
      title: '用户选中',
      dataIndex: 'question_type_options',
      customRender: function(text, record, index) {
        let res = '';
        for (const i in text) {
          res += text[i].name + ','
        }
        return res.substr(0, res.length - 1);
      },
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
    {
      title: '是否支付',
      dataIndex: 'if_pay',
      customRender: function(text, record, index) {
        if (text == 1) {
          return "已支付"
        }
        if (text == 2) {
          return "未支付"
        }
      },
    },
    {
      title: '支付金钱',
      sorter: true,
      dataIndex: 'payed_money',
      customRender: function(text, record, index) {
          return (text / 100).toFixed(2)
      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      sorter: true
    },
  ]
  export default {
    name: 'QuestionList',
    components: {
      AvatarItem,
      STable,
      Ellipsis,
      CreateForm,
      StepByStepModal
    },
    data () {
      this.columns = columns
      return {
        // create model
        visible: false,
        confirmLoading: false,
        mdl: null,
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        // 分类列表
        questionTypeListData: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          return questionList(requestParameters)
                  .then(res => {
                    return res.data
                  })
        },
        selectedRowKeys: [],
        selectedRows: []
      }
    },
    filters: {
      iconFilter(text) {
        return text == null ? 'http://banfang-1252936237.cos.ap-guangzhou.myqcloud.com/timg' : text
      }
    },
    created () {
      this.loadQuestionTypeListData()
    },
    computed: {
      rowSelection () {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      }
    },
    methods: {
      handleDelete() { // 删除
        questionDelete({ ids: this.selectedRowKeys })
                .then((res)=> {
                  if (res.code > 0) {
                    this.$message.success(res.data)
                    this.tableInit()
                  }else{
                    this.$message.error(res.data)
                  }
                }).catch((err)=> {
          console.log(err)
        });
      },
      loadQuestionTypeListData () {
        return questionTypeList({ pageSize: 999, pageNo: 1 })
                .then(res => {
                  this.questionTypeListData = res.data
                })
      },
      handleAdd () {
        this.mdl = null
        this.visible = true
      },
      handleEdit (record) {
        this.visible = true
        this.mdl = { ...record }
      },
      getCurrentStyle(current, today) {
        const style = {};
        if (current.date() === 1) {
          style.border = '1px solid #1890ff';
          style.borderRadius = '50%';
        }
        return style;
      },
      handleCancel () {
        this.visible = false

        const form = this.$refs.createModal.form
        form.resetFields() // 清理表单数据（可不做）
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      resetSearchForm () {
        this.queryParam = {
          date: moment(new Date())
        }
      }
    }
  }
</script>
